<template>
    <view style="padding-bottom: 10rpx;">
		<u-tabbar
			:value="tabbar_name"
			@change="changeTabBar"
			activeColor="#27C5D6"
			inactiveColor="#6A707C"
		>
			<u-tabbar-item text="找達人" @click="clickTab" name='expert'>
				<image
					class="slot-icon"
					slot="active-icon"
					src="/static/images/icon/expert_active.png"
				></image>
				<image
					class="slot-icon"
					slot="inactive-icon"
					src="/static/images/icon/expert.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="找任務" @click="clickTab" name='task'>
				<image
					class="slot-icon"
					slot="active-icon"
					src="/static/images/icon/task_active.png"
				></image>
				<image
					class="slot-icon"
					slot="inactive-icon"
					src="/static/images/icon/task.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item name="plus" @click="clickTab">
				<image
					class="plus-icon"
					slot="inactive-icon"
					src="/static/images/icon/plus.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="社群" @click="clickTab" name='colony'>
				<image
					class="slot-icon"
					slot="active-icon"
					src="/static/images/icon/colony_active.png"
				></image>
				<image
					class="slot-icon"
					slot="inactive-icon"
					src="/static/images/icon/colony.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="clickTab" name='my'>
				<image
					class="slot-icon"
					slot="active-icon"
					src="/static/images/icon/my_active.png"
				></image>
				<image
					class="slot-icon"
					slot="inactive-icon"
					src="/static/images/icon/my.png"
				></image>
			</u-tabbar-item>
		</u-tabbar>
		<!--发布选择弹窗-->
		<pushlish-popup ref="pushlishPopup" ></pushlish-popup>
		<!--发布选择弹窗结束-->
	</view>
</template>

<script>
import uTabbar from '@/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue';
import pushlishPopup from './publish-popup.vue';
	
export default {
    components: {
    	pushlishPopup
    },
	props: {
        type: String,
    },
    data() {
        return {
            tabbar_name: this.type,
        };
    },
    methods: {
        //切換菜單欄
        changeTabBar(e){
        	console.log('changeTabBar', e);
        	if(e == 'expert'){
        		//找達人
        		uni.switchTab({
        			url: '/pages/home/index'
        		});
        		return;
        	}else if( e == 'task' ){
        		//找任務
        		uni.switchTab({
        			url: '/pages/home/recruit'
        		});
        		return;
        	}else if(e == 'colony'){
        		//社群
        		uni.switchTab({
        			url: '/pages/home/colony'
        		});
        		return;
        	} else if(e == 'my'){
        		//個人
        		uni.switchTab({
        			url: '/pages/my/my'
        		});
				console.log('sss')
        		return;
        	} else {
        		// this.$refs.pushlishPopup.show();
        	}
        },
        //點擊菜單
        clickTab(e){
        	console.log('clickTab', e);
        },
    }
};
</script>

<style lang="scss" scoped>
.tabbar{
	padding-bottom: env(safe-area-inset-bottom); /* iOS 安全区域 */
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版本 */
}
.slot-icon{
	width: 50rpx;
	height: 50rpx;
}
.plus-icon{
	width: 48rpx;
	height: 48rpx;
	background-color: #27C5D6;
	padding: 22rpx;
	border-radius: 50%;
	margin-top: 10rpx;
}
</style>
